import React, { Component } from 'react';
import {Form, Input, Button, Icon, Select, Row, Col, Switch} from 'antd';
const {Option} = Select
export class PublishArticle extends  Component{
    componentDidMount() {
    
    }
    componentWillReceiveProps(prevProps) {
    
    }
    handleSubmit() {

    }
    renderType() {
        const types = [
            {text: '原创', value: 1},
            {text: '转发', value: 2},
            {text: '翻译', value: 3}
        ]
        const options = []
        types.map((type) => {
            options.push(<Option value={type.value}>{type.text}</Option>)
        })
        return options;
    }
    renderClassify() {
        const types = [
            {text: 'Vue', value: 1},
            {text: 'React', value: 2},
            {text: 'Java', value: 3}
        ]
        const options = []
        types.map((type) => {
            options.push(<Option value={type.value}>{type.text}</Option>)
        })
        return options;
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="article-content">
                <Form layout="inline" onSubmit={this.handleSubmit}>
                    <Row>
                        <Col span={24}>
                            <Form.Item label="文章标题">
                                {getFieldDecorator('title', {
                                    rule: [{required: true, message: '请输入标题'}]
                                })(<Input placeholder="文章标题" />)}
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={4}>
                            <Form.Item label="文章类型">
                                <Select style={{width: '100px'}}>
                                    {this.renderType()}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <Form.Item label="文章分类">
                                <Select style={{width: '100px'}}>
                                    {this.renderClassify()}
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={4}>
                            <Form.Item label="私密文章">
                                <Switch />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
        )
    }
}

export default Form.create()(PublishArticle)